<template>
  <div>
    <nav-bar title="危大工程"></nav-bar>
    <div class="maxinBox">
      <van-tabs type="card" v-model="active" @change="getInfoList">
        <van-tab title="未实施">
          <card v-for="(item, index) in dataList" :key="index" :itemData="item" @click.native="getDetails(item)"></card>
        </van-tab>
        <van-tab title="实施中">
          <card v-for="(item, index) in dataList" :key="index" :itemData="item" @click.native="getDetails(item)"></card>
        </van-tab>
        <van-tab title="已完成">
          <card v-for="(item, index) in dataList" :key="index" :itemData="item" @click.native="getDetails(item)"></card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import Card from './components/card.vue'
  import dangerProjectAPI from '../../../api/workAPI/dangerProjectAPI.js'
  export default {
    components: {
      Card
    },
    data() {
      return {
        active: 0,
        dataList: [],
        projectId: localStorage.getItem('projectId')
      }
    },
    methods: {
      // 危大列表
      getInfoList() {
        let status
        if (this.active === 0) {
          status = 1
        } else if (this.active === 1) {
          status = 2
        } else {
          status = 3
        }
        dangerProjectAPI.getDangerProjectList(status, this.projectId).then(res => {
          this.dataList = res
        })
      },
      // 跳转详情
      getDetails(data) {
        this.$router.push({
          name: 'DangerProjectDetails',
          params: {
            itemData: data
          }
        })
      }
    },
    mounted() {
      this.getInfoList()
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-tabs__wrap{
    // height: 2.75rem;
    // line-height: 2.75rem;
    .van-tabs__nav--card{
      border: inherit;
      margin: inherit;
      // height: 2.75rem;
      .van-tab.van-tab--active{
        background-color: #fff;
        color: #1577FF;
      }
      .van-tab{
        border: inherit;
        // height: 2.75rem;
        // line-height: 2.75rem;
        color: #999;
        background-color: #EBEBEB;;
      }
    }
  }
  .personalManage{
    .personalData{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      div{
        padding: 0.125rem 0;
      }
      div:nth-child(1) {
        font-size: 1rem;
        color: #333;
      }
      div:nth-child(2),div:nth-child(3) {
        font-size: 0.875rem;
        color: #666;
      }
    }
  }
  .tableData{
    font-size: 0.875rem;
    .tableContent:nth-child(2n){
      padding: 0.625rem 0.9375rem;
      color: #666;
    }
    .tableContent:nth-child(2n + 1){
      padding: 0.625rem 0.9375rem;
      color: #666;
      background-color: #F6FAFF;
    }
    .tableTitle{
      padding: 0.625rem 0.9375rem;
      background-color: #F6F6F6;
      height: 1.25rem;
      color: #999;
    }
  }
</style>
